<template>
  <!-- 每次切换一张 -->
  <div class="swiper-wrap">
    <div v-swiper:mySwiper="swiperOption" class="swiper-no-swiping">
      <div class="swiper-wrapper">
        <div v-for="(item,index) in 15" :key="index" class="swiper-slide">
          <div class="item">
            <div>
              <img src="~static/img/t1.jpg" class="swiper-lazy">
            </div>
            <div>这是礼物</div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-button-prev" />
    <div class="swiper-button-next" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      swiperOption: {
        loop: true,
        slidesPerView: 5, // 设置显示5张
        centeredSlides: true, // 使当前图片居中显示
        freeMode: true, // 使幻灯片滑动时不止滑动一格，且不会自动贴合
        slidesPerGroup: 1, // 定义1张图片,每次滚动1张；当和显示个数相同即滚动一页
        // speed: 3000, // 设置过度时间
        resistanceRatio: 0, // 禁止左右滑动到最前和最后一张图片回弹
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
        /*  设置每隔3000毫秒切换 */
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // },
        // scrollbar: {
        //   el: '.swiper-scrollbar',
        //   hide: true
        // }
      }
    }
  },
  mounted () {
    console.log('Current Swiper instance object', this.mySwiper) // swiper实例
    // this.mySwiper.slideTo(3, 1000, false)
  }
}
</script>
<style lang='scss' scoped>
.swiper-wrap {
  width: 1300px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  .swiper-container{
    width: 1200px;
  }
  .swiper-button-prev {
    left: 10px;
  }
}
</style>
